<template>
  <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
    <div class="car">
      <div class="title">购物车</div>
      <div class="box">
        <div class="section" v-for="item in list" :key="item.id">
          <div class="top">
            <input
              type="checkbox"
              @change="checkAll(item)"
              v-model="item.selected"
            />
            <img :src="item.branchUrl" />
            <span>{{ item.branchname }}</span>
          </div>
          <div class="demo" v-for="obj in item.goods" :key="obj.gid">
            <input type="checkbox" @change="check(item)" v-model="obj.selected" />
            <img :src="obj.goodsUrl" />
            <div class="txt">
              <h4>{{ obj.goodsname }}</h4>
              <div class="bot">
                <span class="price">单价：￥{{ obj.gprice }}</span>
                <button @click="addNum(obj)">+</button>
                <input type="num" v-model="obj.stNum" />
                <button @click="reduceNum(obj)">-</button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="submit">
        <div class="txt">
          <p>共{{nums}}件</p>
          <span>总计：￥{{total.toFixed(2)}}</span>
        </div>
        <div class="but" @click="submit">去结算</div>
      </div>
    </div>
  </van-pull-refresh>
</template>

<script>
  export default {
    name: "car",
    data() {
      return {
        isLoading: false,
        list:[],
        goods:[],
      };
    },
    created() {
      this.initTable();
    },
    methods: {

      //商品数量增加
      addNum(obj){
        obj.stNum++;
        this.$http.get('/shoppingcar/shoppingTrolley/addNum?gid='+obj.gid+"&bid="+obj.bid).then(result=>{
        })
      },

      //商品数量减少
      reduceNum(obj){
        if(obj.stNum <= 1){
          this.$message({
            message: '已到最低起购数量',
          });
          return;
        }
        this.$http.get('/shoppingcar/shoppingTrolley/reduceNum?gid='+obj.gid+"&bid="+obj.bid).then(result=>{
        })
        obj.stNum - 1 > 0 ? obj.stNum-- : 0;
      },

      //查询所有
      initTable(){
        var userid = sessionStorage.getItem("userid")
        console.log(userid)
        this.$http.get('/shoppingcar/shoppingTrolley/findAll?userid='+userid).then(result=>{
          console.log(result.data.data);
          this.list = result.data.data;
          this.goods = result.data.data.list;
        })
      },

      //下拉刷新
      onRefresh() {
        setTimeout(() => {
          window.location.reload()
          this.isLoading = false;
        }, 1000);
      },

      // 全选判断
      checkAll(obj) {
        console.log(obj.goods);
        obj.goods.forEach((item) => {
          item.selected = obj.selected;
        });
      },
      // 单选、反选
      check(obj) {
        obj.selected = obj.goods.every((item) => item.selected);
      },
      // 提交
      submit() {
        // 需要提交的数据--选中的商品
        let outList = JSON.parse(JSON.stringify(this.list));
        outList = outList.filter((obj) => {
          let arr = obj.goods.filter((obj) => obj.selected);
          if (arr.length) {
            obj.goods = arr;
            return obj;
          }
        });
        // 不需要提交的数据--未选中的商品
        let list = JSON.parse(JSON.stringify(this.list));
        list = list.filter((obj) => {
          let arr = obj.goods.filter((obj) => !obj.selected);
          if (arr.length) {
            obj.goods = arr;
            return obj;
          }
        });
        this.list = list;
        console.log("剩下不需要提交的数据", list);

        console.log("选中提交的数据", outList);
        if (outList.length) {
          var uid = sessionStorage.getItem("userid")
          this.$http.post('/payorder/payorder/submitOrder?uid='+uid,outList).then(result=>{
            console.log(outList);
          })
          // 转跳下单支付页面
            setTimeout(() =>{
                this.$router.push("/index/orderSettle");
            },1000)

        }else {
          this.$message({
            message:"请至少选择一项商品"
          })
        }
      },
    },
    computed: {
      // 选中商品数量
      nums() {
        return this.list.reduce((i, v) => {
          return (
                  i + v.goods.filter((obj) => obj.selected).reduce((j, vv) => j + vv.stNum, 0)
          );
        }, 0);
      },
      // 总计
      total() {
        return this.list.reduce((i, v) => {
          return (
                  i +
                  v.goods
                          .filter((obj) => obj.selected)
                          .reduce((j, vv) => j + vv.stNum * vv.gprice, 0)
          );
        }, 0);
      },
    },
  };
</script>

<style lang='less' scoped>
  * {
    padding: 0;
    margin: 0;
  }
  .car {
    text-align: center;
    padding-bottom: 130px;
    width: 100vw;
    overflow: hidden;
    background-color: #f1f1f1;
    .title {
      position: fixed;
      width: 100vw;
      line-height: 45px;
      font-weight: 600;
      background-color: #f00;
      color: #fff;
    }
    .box {
      padding-top: 45px;
      .section {
        background-color: #fff;
        margin: 10px;
        padding: 10px 5px;
        border-radius: 10px;
        .top {
          display: flex;
          border-bottom: 1px solid #c4c4c4;
          padding-bottom: 5px;
          > input {
            margin: 0 10px;
          }
          > img {
            margin-left: 13px;
            margin-right: 5px;
            width: 30px;
            height: 30px;
            border-radius: 5px;
          }
          > span {
            line-height: 30px;
          }
        }
        .demo {
          display: flex;
          padding: 10px 0 0 25px;
          > input {
          }
          > img {
            width: 75px;
            height: 75px;
            border-radius: 10px;
            margin: 0 8px;
          }
          > .txt {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            position: relative;
            > h4 {
              margin: 3px 0;
            }
            > p {
              font-size: 14px;
              color: #f00;
            }
            > .bot {
              align-self: flex-end;
              flex-grow: 1;
              text-align: right;
              position: absolute;
              bottom: 0px;
              width: 100%;
              > .price {
                float: left;
                color: #f00;
                font-size: 14px;
              }
              > button {
                width: 25px;
              }
              > input {
                width: 30px;
              }
            }
          }
        }
      }
    }
    .submit {
      position: fixed;
      width: 100vw;
      padding: 10px;
      background-color: #fff;
      border-radius: 8px;
      box-sizing: border-box;
      bottom: 60px;
      > .txt {
        float: left;
        line-height: 20px;
        text-align: left;
      }
      > .but {
        width: 150px;
        line-height: 40px;
        background-color: #35f;
        color: #fff;
        border-radius: 10px;
        float: right;
      }
    }
  }
</style>